<!-- 创建题目 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="800px"
    @close="resetForm"
    :close-on-click-modal="false"
  >
    <!-- 题型切换 -->
    <div class="question-type-tabs">
      <el-button
        v-for="type in questionTypes"
        :key="type.value"
        :type="activeTab === type.value ? 'primary' : 'default'"
        @click="switchQuestionType(type.value)"
        size="small"
      >
        {{ type.label }}
      </el-button>
    </div>

    <!-- 题干 -->
    <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="题干" prop="questionText">
        <el-input
          v-model="formData.questionText"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入题目内容"
        />
      </el-form-item>

      <!-- 选项区域 -->
      <el-form-item
        label="选项"
        :prop="activeTab === 'multiple' ? 'answers' : 'answer'"
      >
        <div class="options-container">
          <!-- 单选题和多选题 -->
          <template v-if="activeTab !== 'judge'">
            <div
              v-for="(option, index) in currentOptions"
              :key="option.label"
              class="option-item"
            >
              <div class="option-label">
                <el-radio
                  v-if="activeTab === 'single'"
                  v-model="formData.answer"
                  :label="option.label"
                  class="option-radio"
                >
                  {{ option.label }}
                </el-radio>
                <el-checkbox
                  v-else-if="activeTab === 'multiple'"
                  v-model="formData.answers"
                  :label="option.label"
                  class="option-checkbox"
                >
                  {{ option.label }}
                </el-checkbox>
              </div>

              <el-input
                v-model="option.value"
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 3 }"
                placeholder="请输入选项内容"
                class="option-input"
              />

              <div class="option-actions">
                <el-button
                  size="mini"
                  type="danger"
                  @click="removeOption(index)"
                  :disabled="currentOptions.length <= 2"
                >
                  删除
                </el-button>
              </div>
            </div>

            <!-- 新增选项按钮 -->
            <el-button
              size="small"
              type="primary"
              @click="addOption"
              class="add-option-btn"
            >
              新增选项
            </el-button>
          </template>

          <!-- 判断题 -->
          <div v-else class="judge-options">
            <el-radio-group v-model="formData.answer">
              <el-radio label="对">对</el-radio>
              <el-radio label="错">错</el-radio>
            </el-radio-group>
          </div>
        </div>
      </el-form-item>

      <!-- 答案解析 -->
      <el-form-item label="答案解析" prop="analysis">
        <el-input
          v-model="formData.analysis"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入答案解析"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="success" @click="submitNext">提交，下一题</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "CreateQuestionDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeTab: "single",
      dialogTitle: "新增题目",
      formData: {
        questionText: "",
        answer: "", // 单选或判断的答案
        answers: [], // 多选答案
        singleOptions: [
          { label: "A", value: "" },
          { label: "B", value: "" },
          { label: "C", value: "" },
          { label: "D", value: "" },
        ],
        multipleOptions: [
          { label: "A", value: "" },
          { label: "B", value: "" },
          { label: "C", value: "" },
          { label: "D", value: "" },
        ],
        analysis: "",
      },
      rules: {
        questionText: [
          { required: true, message: "请输入题干", trigger: "blur" },
        ],
        answer: [{ required: true, message: "请选择答案", trigger: "change" }],
        answers: [
          {
            type: "array",
            required: true,
            message: "请至少选择2个答案",
            trigger: "change",
          },
        ],
        analysis: [
          { required: false, message: "请输入答案解析", trigger: "blur" },
        ],
      },
      questionTypes: [
        { label: "单选题", value: "single" },
        { label: "多选题", value: "multiple" },
        { label: "判断题", value: "judge" },
      ],
    };
  },
  computed: {
    currentOptions() {
      return this.activeTab === "single"
        ? this.formData.singleOptions
        : this.activeTab === "multiple"
        ? this.formData.multipleOptions
        : [];
    },
  },
  methods: {
    resetForm() {
      this.$refs["form"].resetFields();
      this.formData = {
        questionText: "",
        answer: "", // 单选或判断的答案
        answers: [], // 多选答案
        singleOptions: [
          { label: "A", value: "" },
          { label: "B", value: "" },
          { label: "C", value: "" },
          { label: "D", value: "" },
        ],
        multipleOptions: [
          { label: "A", value: "" },
          { label: "B", value: "" },
          { label: "C", value: "" },
          { label: "D", value: "" },
        ],
        analysis: "",
      };
      this.activeTab = "single";
      this.$emit("update:visible", false);
    },

    addOption() {
      const newOption = {
        label: String.fromCharCode(65 + this.currentOptions.length),
        value: "",
      };
      if (this.activeTab === "single") {
        this.formData.singleOptions.push(newOption);
      } else {
        this.formData.multipleOptions.push(newOption);
      }
    },

    removeOption(index) {
      if (this.activeTab === "single") {
        this.formData.singleOptions.splice(index, 1);
      } else {
        this.formData.multipleOptions.splice(index, 1);
      }
    },

    switchQuestionType(type) {
      this.activeTab = type;
      // 清空当前答案
      if (type === "single" || type === "judge") {
        this.formData.answer = "";
      } else {
        this.formData.answers = [];
      }
    },

    cancel() {
      this.$emit("update:visible", false);
      this.resetForm();
    },

    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let questionOptionList = [];
          // 根据题型处理选项
          if (this.activeTab === "single") {
            questionOptionList = this.formData.singleOptions.map((option) => ({
              optionName: option.label,
              optionContent: option.value,
            }));
          } else if (this.activeTab === "multiple") {
            questionOptionList = this.formData.multipleOptions.map(
              (option) => ({
                optionName: option.label,
                optionContent: option.value,
              })
            );
          }

          const questionData = {
            questionName: this.formData.questionText,
            questionType:
              this.activeTab === "single"
                ? 1
                : this.activeTab === "multiple"
                ? 2
                : 3,
            answer:
              this.activeTab === "multiple"
                ? this.formData.answers.join(",")
                : this.formData.answer,
            analysisContent: this.formData.analysis,
            questionOptionList: questionOptionList,
          };

          this.$emit("submit", questionData);
          this.cancel();
        }
      });
    },

    submitNext() {
      this.submit();
    },
  },
};
</script>

<style scoped>
.question-type-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.options-container {
  margin-top: 10px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 10px; /* 在各元素间添加间隙 */
}

.option-label {
  width: 50px;
  display: flex;
  align-items: center;
  padding-top: 6px; /* 与文本域对齐 */
}

.option-item .el-input {
  flex: 1;
}

.option-actions {
  padding-top: 6px; /* 与文本域对齐 */
}

.judge-options {
  margin-top: 10px;
}
</style>

